<template>
   <div class="box">
        <img class="box-imgs1" src="/static/imgs_s10/s_10Mall.02.png" alt="">
        <div class="box-div1">
            <div class="a">
                <span class="a-span1">
                    威尔贝鲁（WELLBER）婴儿定型枕新生儿U型枕头 彩棉
                    舒适卡通定型枕
                </span>
                <div class="a1">
                    <img src="/static/imgs_s10/s_10Mall.01.png" alt="">
                    <span class="a1-span1">300积分</span>
                    <span class="a1-span2">剩余：100</span>
                </div>
            </div>
            <div class="b">
                <img src="/static/imgs_s10/s_10Mall.03.png" alt="">
                <span class="b-span1">有效期</span>
                <span class="b-span2">2019-10-01至2019-12-01</span>
            </div>
            <div class="c">
                <div class="c1">
                    <span class="c-span1"></span>
                    <span class="c-span2">兑换流程</span>
                </div>
                <span class="c-span3">
                    兑换流程兑换流程兑换流程兑换流程兑换流程兑换流程兑换流程
                    兑换流程兑换流程兑换流程兑换流程兑换流程
                </span>
            </div>
            <div class="d">
                <div class="d1">
                    <span class="d-span1"></span>
                    <span class="d-span2">商品简介</span>
                </div>
                <span class="d-span3">
                    商品简介商品简介商品简介商品简介商品简介商品简介商品简介
                    商品简介商品简介商品简介商品简介商品简介
                </span>
            </div>
            <span class="a-span2">立即兑换</span>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 375px;
            height: 773px;
            position: relative;
            background: rgba(247, 247, 247, 1);
        }

        .box-imgs1 {
            width: 100%;
            height: 350px;
        }

        .box-div1 {
            width: 375px;
            height: 400px;
            background: rgba(255, 255, 255, 1);
        }

        /* 文字一区 */
        .a {
            width: 375px;
            height: 94px;
        }

        .a-span1 {
            margin: 12px 22px 0 9px;
            width: 345px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
            display: inline-block;
        }

        .a1 {
            width: 354px;
            margin-left: 8px;
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .a1 img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
        }

        .a1-span1 {
            font-size: 13px;
            font-weight: 400;
            color: rgba(50, 177, 108, 1);
        }

        .a1-span2 {
            font-size: 12px;
            font-weight: 300;
            color: rgba(163, 165, 168, 1);
            margin-left: 230px;
        }

        .b {
            width: 375px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background: rgba(246, 246, 246, 1);
        }

        .b img {
            margin-left: 12px;
            width: 14px;
            height: 14px;
        }

        .b-span1 {
            margin-left: 5px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(111, 111, 111, 1);
        }

        .b-span2 {
            margin-left: 124px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(111, 111, 111, 1);
        }

        .c,
        .d {
            width: 375px;
            height: 91px;
        }

        .c1,
        .d1 {
            margin-left: 10px;
            margin-top: 18px;
        }

        .c-span1,
        .d-span1 {
            width: 2px;
            height: 12px;
            background: rgba(50, 177, 108, 1);
            display: inline-block;
        }

        .c-span2,
        .d-span2 {
            margin-left: 5px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            line-height: 19px;
            display: inline-block;
        }

        .c-span3,
        .d-span3 {
            margin-left: 18px;
            margin-top: 18px;
            width: 338px;
            height: 33px;
            font-size: 12px;
            font-weight: 300;
            color: rgba(0, 0, 0, 1);
            display: inline-block;
        }

        .a-span2 {
            margin-left: 11px;
            margin-top: 20px;
            width: 353px;
            height: 42px;
            background: rgba(50, 177, 108, 1);
            border-radius: 3px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
